<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>cake</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/comm.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  		<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
	</head>

	<body>
		<!--头部-->
		<div class="header">
				<div class="container-fluid">
				<nav class="navbar navbar-default container index-top">
					<div class="container-fluid">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
							<a class="navbar-brand index-logo" href="#">
								<img src="img/logo.png" alt="" class="images" classs="animated jackInTheBox"/>
							</a>
						</div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li>
									<a href="index.html" class="color-hover">首页 <span class="sr-only">(current)</span></a>
								</li>
								<li>
									<a href="cake.html" class="color-hover">蛋糕</a>
								</li>
								<li>
									<a href="cake.html" class="color-hover">冰淇淋</a>
								</li>
								<li>
									<a href="cake.html" class="color-hover">小切块</a>
								</li>
								<li>
									<a href="distribution.html" class="color-hover">全国配送</a>
								</li>
								<li>
									<a href="#" class="color-hover">企业专区</a>
								</li>
							</ul>
							<ul class="nav navbar-nav navbar-right index-sing">
								<li class="dropdown">
									<a href="#" class="dropdown-toggle color-hover" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">广州 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li>
											<a href="#" class="color-hover">深圳</a>
										</li>
										<li>
											<a href="#" class="color-hover">上海</a>
										</li>
										<li>
											<a href="#" class="color-hover">北京</a>
										</li>
										<li>
											<a href="#" class="color-hover">佛山</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="#" class="color-hover">消息</a>
								</li>
								<li>
									<p class="color index-signIn">
										<a href="./sign.html" class="color-hover">登录</a>/
										<a href="register.html" class="color-hover">注册</a>
									</p>
								</li>
								<li>
									<a href="#" class="color-hover">购物车</a>
								</li>
							</ul>
						</div>
						<!-- /.navbar-collapse -->
					</div>
					<!-- /.container-fluid -->
				</nav>

			</div>
			</div>
			
		<!--轮播图-->
		<div id="myCarousel" class="carousel slide mar-top"  data-ride="carousel">
		    <!-- 轮播（Carousel）指标 -->
		    <ol class="carousel-indicators">
		        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		        <li data-target="#myCarousel" data-slide-to="1"></li>
		        <li data-target="#myCarousel" data-slide-to="2"></li>
		    </ol>   
		    <!-- 轮播（Carousel）项目 -->
		    <div class="carousel-inner index-carousel">
		        <div class="item active">
		            <a href="#"><img src="img/b6dd2a1612d554800d6c7b53b621343c.jpg" alt="First slide" class="index-carousel-img"></a>
		        </div>
		        <div class="item">
		           <a href="#"> <img src="img/c13d3d2b3fc2a7cce4b68d5047dd9bde.jpg" alt="Second slide" class="index-carousel-img"></a>
		        </div>
		        <div class="item">
		            <a href="#"><img src="img/86a4862cc5f265672c125bc18d7e30af.jpg" alt="Third slide" class="index-carousel-img"></a>
		        </div>
		    </div>
		    <!-- 轮播（Carousel）导航 -->
		    <!--<a class="carousel-control left" href="#myCarousel" 
		       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
		    <a class="carousel-control right" href="#myCarousel" 
		       data-slide="next">&rsaquo;</a>-->
		</div>
		<!--导航-->
		<div class="container content" style="margin-bottom: 100px;">
			<div class="row content-top">
				<div class="col-md-3 col-xs-6  mar-bottom col-sm-6">
					<a href="#1" class="nav-top">
						<img src="img/b7540955788d4deb492b0b6ac542155b.jpg" alt="" class="img-responsive center-block"/>
					</a>
				</div>
				<div class="col-md-3 col-xs-6 mar-bottom col-sm-6">
					<a href="#2" class="nav-top">
						<img src="img/c0a2454f8628f5a6a3d0e64b78ec114b.jpg" alt="" class="img-responsive center-block"/>
					</a>
				</div>
				<div class="col-md-3 col-xs-6 mar-bottom col-sm-6">
					<a href="tea.html" class="nav-top">
						<img src="img/ca91015005c01b20abd04951968c9ad8.jpg" alt="" class="img-responsive center-block"/>
					</a>
				</div>
				<div class="col-md-3 col-xs-6 mar-bottom col-sm-6">
					<a href="#4" class="nav-top">
						<img src="img/96278743d8c557a662fb6a2435440c79.jpg" alt="" class="img-responsive center-block"/>
					</a>
				</div>
			</div>
			<!--新品-->
			<div class="row" id='1'>
				<div class="col-md-12 col-sm-12">
					<div class="row">
						<div class="navigation col-md-12 col-sm-12">
							<h3 class="color index-title">新品<span class="font-size">&nbsp; &nbsp;/&nbsp;&nbsp;专区</span></h3>
						</div>
					</div>
				</div>
				<div class="col-md-12 col-sm-12">
					<a href="#" class="navigation-img">
								<img src="img/ce57189ed669b0be3bf51bccf39e6ab2.jpg" class="img-responsive"/>
							</a>
					<div class="row">
						<div class="col-md-3 col-xs-6 mar-bottom col-sm-6">
							<a href="javascript:;" class="nav-one-img">
								<img src="img/cc1684f0f14f4d1292659a837768edaf.png" alt="" class="img-responsive center-block images" classs="animated zoomInDown"/>
							</a>
							<p class="text-overflow font-size16"><a href="javascript:;" class="color-hover">（新）栗蓉暗香</a></p>
							<p class="text-overflow"><a href="javascript:;">记忆中的栗子蛋糕，几代人恰好的团圆</a></p>
							<div class="tag-list">
								<a href="javascript:;">长辈></a>
								<a href="javascript:;">聚会></a>
								<a href="javascript:;">童趣></a>
							</div>
							<div class="price col-md-12 col-sm-12">
								<div class="row">
									<div class="col-md-5  col-xs-12 col-sm-5"><div class="row">¥298.00/2.0磅</div></div>
									<div class="col-md-5 col-md-push-2 col-xs-12 col-sm-4 col-sm-push-3">
										<div class="row">
											<a href="javascript:;" class="index-car">加入购物车</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-xs-6 mar-bottom col-sm-6">
							<a href="javascript:;" class="nav-one-img">
								<img src="img/a4dfb0c5554c6f119024fa8885515bdc.png" alt=""  class="img-responsive center-block images" classs="animated zoomInDown"/>
							</a>
							<p class="text-overflow font-size16"><a href="javascript:;" class="color-hover">榴莲飘飘</a></p>
							<p class="text-overflow"><a href="javascript:;">榴莲狂热者的不二之选</a></p>
							<div class="tag-list">
								<a href="javascript:;">聚会></a>
								<a href="javascript:;">人气></a>
								<a href="javascript:;">新品></a>
							</div>
							<div class="price col-md-12 col-sm-12">
								<div class="row">
									<div class="col-md-5  col-xs-12 col-sm-5"><div class="row">¥298.00/2.0磅</div></div>
									<div class="col-md-5 col-md-push-2 col-xs-12 col-sm-4 col-sm-push-3">
										<div class="row">
											<a href="javascript:;" class="index-car">加入购物车</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-xs-6 mar-bottom">
							<a href="javascript:;" class="nav-one-img">
								<img src="img/fee9099f7540971e0bea7bd50b748130.png" alt="" class="img-responsive center-block images"  classs="animated zoomInDown"/>
							</a>
							<p class="text-overflow font-size16" ><a href="javascript:;" class="color-hover">百香果酸乳酪慕斯蛋糕</a></p>
							<p class="text-overflow"><a href="javascript:;">冰淇淋口感，不同层次的酸与冰凉</a></p>
							<div class="tag-list">
								<a href="javascript:;">情侣></a>
								<a href="javascript:;">低温></a>
							</div>
							<div class="price col-md-12 col-sm-12">
								<div class="row">
									<div class="col-md-5  col-xs-12 col-sm-5"><div class="row">¥298.00/2.0磅</div></div>
									<div class="col-md-5 col-md-push-2 col-xs-12 col-sm-4 col-sm-push-3">
										<div class="row">
											<a href="javascript:;" class="index-car">加入购物车</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-xs-6 mar-bottom">
							<a href="javascript:;" class="nav-one-img">
								<img src="img/fd064150fe6c3913d0f996ac5a19ef07.png" alt="" class="img-responsive center-block images" classs="animated zoomInDown" />
							</a>
							<p class="text-overflow font-size16"><a href="javascript:;" class="color-hover">枣儿</a></p>
							<p class="text-overflow"><a href="javascript:;">红枣奶油戚风，与姜撞奶慕斯</a></p>
							<div class="tag-list">
								<a href="javascript:;">新品></a>
								<a href="javascript:;">聚会></a>
							</div>
							<div class="price col-md-12 col-sm-12">
								<div class="row">
									<div class="col-md-5  col-xs-12 col-sm-5"><div class="row">¥298.00/2.0磅</div></div>
									<div class="col-md-5 col-md-push-2 col-xs-12 col-sm-4 col-sm-push-3">
										<div class="row">
											<a href="javascript:;" class="index-car">加入购物车</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
			
				</div>		
			</div>
			
			<!--人气-->
			<div class="row" id="2">
					<div class="col-md-12">
						<div class="row">
							<div class="navigation col-md-12">
								<h3 class="color  index-title">人气<span class="font-size">&nbsp; &nbsp;/&nbsp;&nbsp;专区</span></h3>
								
							</div>
						</div>
					</div>
				<div class="col-md-12">
					<a href="#" class="navigation-img">
										<img src="img/98e81e5173b76ffeb264a336e5ed83c3.jpg" class="img-responsive"/>
									</a>
					<div class="row">
						<div class="col-md-3 col-xs-6 mar-bottom">
							<a href="javascript:;" class="nav-one-img">
								<img src="img/594f5f74fb37172927ad4068fd283bc0.png" alt="" class="img-responsive center-block images" classs="animated zoomInDown"/>
							</a>

							<p class="text-overflow font-size16"><a href="javascript:;" class="color-hover">百利甜情人</a></p>
							<p class="text-overflow"><a href="javascript:;">爱尔兰百利甜酒，新西兰奶油</a></p>
							<div class="tag-list">
								<a href="javascript:;">情侣></a>
								<a href="javascript:;">聚会></a>
								<a href="javascript:;">人气></a>
							</div>
							<div class="price col-md-12 col-sm-12">
								<div class="row">
									<div class="col-md-5  col-xs-12 col-sm-5"><div class="row">¥298.00/2.0磅</div></div>
									<div class="col-md-5 col-md-push-2 col-xs-12 col-sm-4 col-sm-push-3">
										<div class="row">
											<a href="javascript:;" class="index-car">加入购物车</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-xs-6 mar-bottom">
							<a href="javascript:;" class="nav-one-img">
								<img src="img/a2bd25f83255c563caac2e8572cd69d5.png" alt=""  class="img-responsive center-block images" classs="animated zoomInDown"/>
							</a>

							<p class="text-overflow font-size16"><a href="javascript:;" class="color-hover">（彼尔德）黑白巧克力慕斯</a></p>
							<p class="text-overflow"><a href="javascript:;">白巧克力慕斯的甜，与黑巧克力酱的苦</a></p>
							<div class="tag-list">
								<a href="javascript:;">聚会></a>
								<a href="javascript:;">童趣></a>
								<a href="javascript:;">新品></a>
							</div>
							<div class="price col-md-12 col-sm-12">
								<div class="row">
									<div class="col-md-5  col-xs-12 col-sm-5"><div class="row">¥298.00/2.0磅</div></div>
									<div class="col-md-5 col-md-push-2 col-xs-12 col-sm-4 col-sm-push-3">
										<div class="row">
											<a href="javascript:;" class="index-car">加入购物车</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-xs-6 mar-bottom">

							<a href="javascript:;" class="nav-one-img">
								<img src="img/f62cdf61d59c2ff719afe7d502a7543a.png" alt="" class="img-responsive center-block images"  classs="animated zoomInDown"/>
							</a>
							<p class="text-overflow font-size16"><a href="javascript:;" class="color-hover">朗姆芝士</a></p>
							<p class="text-overflow"><a href="javascript:;">酒香，微苦，清新的柠檬</a></p>
							<div class="tag-list">
								<a href="javascript:;">情侣></a>
								<a href="javascript:;">白色情人节></a>
							</div>
							<div class="price col-md-12 col-sm-12">
								<div class="row">
									<div class="col-md-5  col-xs-12 col-sm-5"><div class="row">¥298.00/2.0磅</div></div>
									<div class="col-md-5 col-md-push-2 col-xs-12 col-sm-4 col-sm-push-3">
										<div class="row">
											<a href="javascript:;" class="index-car">加入购物车</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-xs-6 mar-bottom">
							<a href="javascript:;" class="nav-one-img ">
								<img src="img/079093f0b079ad1c1d05f5d5874f8527.png" alt="" class="img-responsive center-block images" classs="animated zoomInDown" />
							</a>
							<p class="text-overflow font-size16" ><a href="javascript:;" class="color-hover">黑白巧克力慕斯（撒粉约会）</a></p>
							<p class="text-overflow"><a href="javascript:;">口感冰凉细腻</a></p>
							<div class="tag-list">
								<a href="javascript:;">人气></a>
								<a href="javascript:;">情侣></a>
							</div>
							<div class="price col-md-12 col-sm-12">
								<div class="row">
									<div class="col-md-5  col-xs-12 col-sm-5"><div class="row">¥298.00/2.0磅</div></div>
									<div class="col-md-5 col-md-push-2 col-xs-12 col-sm-4 col-sm-push-3">
										<div class="row">
											<a href="javascript:;" class="index-car">加入购物车</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
			
				</div>		
			</div>
			
			<!--活动门-->
			<div class="row" id="4">
				<div class="navigation col-md-12">
					<h3 class="color  index-title">活动门<span class="font-size">&nbsp; &nbsp;/&nbsp;&nbsp;是被吸引了吧</span></h3>
					
				</div>
				<a href="#" class="navigation-img col-md-6">
					<img src="img/810af7fb1f079477c8aec960d11fa4df.jpg" class="img-responsive"/>
				</a>
			</div>
		
			<!--文章-->
			<div class="row">
				<div class="navigation col-md-12">
					<h3 class="color  index-title">廿一客<span class="font-size">&nbsp; &nbsp;/&nbsp;&nbsp;文章</span></h3>
				</div>
				<div class="col-md-6 index-new">
					<a href="javascript:;" class="index-new-img">
						<img src="img/05c51624b73e8be65ea0656008fc7140.jpg" alt="" class="img-responsive" />
					</a>
					<h3>二月刊·蛋糕.JPEG</h3>
					<a href="javascript:;" class="color-hover">阅读全文>></a>
				</div>
				<div class="col-md-6 index-new">
					<a href="javascript:;" class="index-new-img">
						<img src="img/05c51624b73e8be65ea0656008fc7140.jpg" alt="" class="img-responsive" />
					</a>
					<h3>一月刊·姜</h3>
					<a href="javascript:;" class="color-hover">阅读全文>></a>
				</div>
			</div>
		</div>	
		
		
		<script type="text/javascript">
			//自动轮播
			$("#myCarousel").carousel({  
	            interval :5000,  
	        });  
		</script>
		<!--自定义动画-->
		<script type="text/javascript">
		lazyRender();
		$(window).on('scroll', function() {
			lazyRender();
		})

		function lazyRender() {
			$('.images').each(function() {
				if(checkShow($(this)) && !isLoaded($(this))) {
					loadImg($(this));
				}
			})
		}
		function checkShow($img) { // 传入一个img的jq对象
			var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离
			var windowHeight = $(window).height(); // 浏览器自身的高度
			var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置

			if(offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
				return true;
			}
			return false;
		}

		function isLoaded($img) {
			return $img.attr('class') === $img.attr('classs'); //如果data-src和src相等那么就是已经加载过了
		}

		function loadImg($img) { // 加载就是把自定义属性中存放的真实的src地址赋给src属性
			$img.addClass($img.attr('classs'))
		}
	</script>

	</body>

</html>